<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in listData" :key="index">
				<!-- <view class="uni-list-cell"> -->
				<view class="uni-media-list">
					<!--<image class="uni-media-list-logo" src="../../static/huiyuanlb.png"></image>-->
					<view class="content">
						<view class="uni-media-list-text-top">
							<p>ID：{{item.id}}</p>
							<p>设备名称：{{item.name}}</p>
							<!-- <p>产品名称：{{item.product_name}}</p> -->
							<p>注册时间：{{item.registry_time | formatDate}}</p>
							<view  v-if="item.state=='online'" class="qiu">
								<p>状态：在线</p>
								<image  src="../../static/icon/online.png"></image>
							</view>
							<view  v-if="item.state=='notActive'" class="qiu">
								<p>状态：未激活</p>
								<image  src="../../static/icon/notActive.png"></image>
							</view>
							<view v-if="item.state=='offline'" class="qiu">
								<p>状态：离线</p>
								<image  src="../../static/icon/offline.png"></image>
							</view>
						</view>
						<!-- <view class="uni-media-list-text-bottom ">
							
						</view> -->
					</view>
					<!-- <view class="uni-list-cell-navigate uni-navigate-right"></view> -->
				</view>
			</view>
			<!--<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>-->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [],
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				let url = '/iotcloud/deviceList'
				this.$http.get(url, {
					params: {
						pageSize: 30,
					}
				}).then(res => {
					if (res.data.success) {
						this.listData = res.data.result
					}
				}).catch(err => {
					console.log(err);
				});
			},

		},
		filters: {
			formatDate: function(value) {
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				return Y + M + D + h + m + s;
			}
		},
	}
</script>

<style>
	.uni-media-list-text-top {
		/* display: flex;
		flex-direction: row;
		justify-content: space-between; */
	}

	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #8f8f94;
	}
	.qiu p{
		display: inline;
	}
	.qiu image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 40rpx;
		top: 5rpx;
	}
</style>
